<template>
    <div v-if="!repoUrl">Loading...</div>
    <div v-else>
        The most star repo is <a :href="repoUrl">{{repoName}}</a>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "App",
        data(){
            return {
                repoUrl:'',
                repoName:''
            }
        },
        //页面初始化时发送ajax异步请求数据
        mounted() {
            const url = `https://api.github.com/search123**/repositories?q=vu&sort=stars`;
            //使用vue-resource发送请求
            // this.$http.get(url).then(response => {
            //     const result = response.data;
            //     const mostRepo = result.items[0];
            //     this.repoUrl = mostRepo.html_url;
            //     this.repoName = mostRepo.name;
            // },
            //     response => {
            //         alert('请求失败')
            //     }
            //
            // );
            //使用axios
            axios.get(url).then(response => {
                    const result = response.data;
                    const mostRepo = result.items[0];
                    this.repoUrl = mostRepo.html_url;
                    this.repoName = mostRepo.name;
                }).catch(error=> alert(error) )
        }
    }
</script>

<style scoped>

</style>